<template>
<!-- 首页 -->
    <div class="container-full">
        <!-- <div class="page-top" v-if="this.$store.state.options.user.oda.notice != null">
            <dl class="notice">
                <dt><img src="../../../static/images/notice-red-mini.png" /></dt>
                <dd @click="$router.push('/public/message-detail?id=' + $store.state.options.user.oda.notice.id)">{{ $store.state.options.user.oda.notice.title }}</dd>
            </dl>
        </div> -->
        <div class="portrait">
            <img v-if="!userInfo.pic" src="../../../static/images/user-manage.png" />
            <img v-else :src="userInfo.pic" />
            <div class="user-info">
                <p>{{userInfo.realname}}</p>
                <p>{{userInfo.zhicheng}}</p>
            </div>
        </div>
        <div class="func-button-group">
            <!-- 暂存点管理 -->
            <dl @click="$router.push('/superAdmin/order-shop')">
                <dt><img src="../../../static/images/trunk.png" /></dt>
                <dd>
                    <p>暂存点管理</p>
                    <p>查看暂存点信息</p>
                </dd>
            </dl>
            <!-- 库存管理 -->
            <dl @click="$router.push('/reservoirManagement/stockM')">
                <dt><img src="../../../static/images/stock-manage-blue.png" /></dt>
                <dd>
                    <p>库存管理</p>
                    <p>查看总库垃圾库存</p>
                </dd>
            </dl>
        </div>
        <div class="nav-menu-button">
            <div class="title-normal">
                <h1>我的工具</h1>
            </div>
        </div>
        <operation src="purse.png" path="/salesman/enquiry-quotation" title="分类报价" />
        <operation src="setting.png" path="/public/securitySettings" title="安全设置" />
        <!-- <operation src="setting.png" path="/shop/list" title="积分兑换"/> -->
    </div>
</template>

<style lang="scss" scoped>
    .page-top {
        width: 100%;
        position: relative;
        height: 3.3rem;
        line-height: 3.3rem;

        .back-image {
            position: absolute;
            top: 0rem;
            bottom: 0rem;
            left: 0rem;
            right: 0rem;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

        .notice {
            position: absolute;
            top: 0rem;
            width: 100%;
            margin: 0rem;
            padding: 0rem 1rem;
            display: flex;
            background-color: rgba(255,255,255,1);
            z-index: 1;
            box-sizing: border-box;
            dt {
                padding-right: 1rem;

                img {
                    width: 1.4rem;
                    vertical-align: middle;
                }
            }

            dd {
                white-space : nowrap;
                flex: 1;
                margin: 0rem;
                padding: 0.05rem 0rem 0rem;
                color: #666666;
                font-size: 1.3rem;
            }
        }
    }
    .portrait {
        height: 13.2rem;
        background-image: url("../../../static/images/back-green-diamond.png");
        background-size: 100% 100%;
        position: relative;
        img {
            position: absolute;
            top: 5rem;
            bottom: 0rem;
            left: 2.8rem;
            right: 0rem;
            width: 5rem;
            height: 5rem;
        }
        .user-info{
            position: absolute;
            top: 5rem;
            left: 8.8rem;
            color: #ffffff;
            p {
                margin: 0rem;
                padding: 0rem;
            }
            p:first-child {
                font-size: 2.2rem;
                font-weight: bold;
            }
            p:last-child {
                margin-top: 1rem;
                font-size: 1.4rem;
            }
        }
    }
    .portrait:after {
        content: "";
        display: block;
    }

    .page-middle {
        display: flex;
        justify-content: center;
        align-items: center;

        .integral, .message {
            flex: 0 0 35%;
            text-align: center;

            img {
                width: 2.5rem;
            }

            p {
                margin: 0rem;
                padding: 0rem;
                font-size: 1.4rem;
                color: #666666;
            }
        }
    }

    .func-button-group {
        display: flex;
        padding: 1rem 0.2rem 1rem;

        dl {
            flex: 1;
            margin: 0.8rem;
            border: 0.1rem solid rgba(225, 228, 233, .3);
            border-radius: 0.5rem;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);

            padding: 1rem;
            display: flex;
            align-items: center;

            dt {
                flex: 0 0 30%;

                img {
                    width: 100%;
                    vertical-align: bottom;
                }
            }

            dd {
                flex: 1;
                padding-left: 1rem;

                p {
                    margin: 0rem;
                    padding: 0rem;
                }
                p:first-child {
                    margin-bottom: 0.5rem;
                    color: #333333;
                    font-size: 1.4rem;
                }
                p:last-child {
                    margin-bottom: 0.15rem;
                    color: #999999;
                    font-size: 1.1rem;
                }
            }
        }
    }

    .nav-menu-button {
        padding: 1rem;

        .header {
            margin-top: 0.2rem;
            padding-bottom: 1.3rem;
            border-bottom: 0.1rem solid #EEEEEE;
        }

        .title-normal {
            display: flex;
            justify-content: space-between;
            align-items: center;

            h1 {
                margin: 0rem;
                padding: 0rem;
                font-size: 1.4rem;
                color: #333333;
                padding-left: 1.2rem;
                position: relative;

                &:before {
                    content: "";
                    display: block;
                    position: absolute;
                    left: 0rem;
                    top: 0rem;
                    bottom: 0rem;
                    width: 0.3rem;
                    background-color: #00CC00;
                    border-radius: 0.4rem;
                }
            }
        }
        .body {
            margin: 2rem 0rem 1.6rem;
        }
    }

    .nav-menu {
        // margin: 0rem -0.5rem;
        .van-cell {
            padding: 10px !important;
        }
    }

    .van-icon__image {
        width: 1.5em !important;
        height: 1.5em !important;
    }

    .van-cell__title span {
        padding-left: 0.5rem !important;
        position: relative;
        top: -0.5px;
    }
</style>

<script>
    import { Cell, CellGroup } from 'vant';
    import TitleNormal from '../../components/currency/title/normal.vue';
    import Operation from '../../components/currency/personal/operation.vue';
    export default {
        name: 'superAdminIndex',
        components: {
            [Cell.name]: Cell, [CellGroup.name]: CellGroup,
            TitleNormal,Operation
        },
        data() {
            return {

            }
        },
        computed: {
            userInfo(){
                return this.$store.state.options.user.oda;
            }
        },
        created(){
            console.log(this.$store.state.options.user.token)
        },
        mounted(){
        },
        methods:{
         
        },
    }
</script>
